<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Document</title>
</head>

<body>
    <div>
        <span>快递商：</span>
        <select id="ps-type" v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>
        </select>
    </div>
    <div>
        <span>快递单号：</span>
        <input type="text" id="psNumber" v-model="number" placeholder="请输入快递单号" />
    </div>
    <div>
        <input type="button" value="查询" id="search" v-on:click="searchByNumber" />
    </div>
    <div id="result-panel">
        <div v-if="status">
            <div v-for="row in rows">
                <span>{{row.time}}</span>
                <span>{{row.context}}</span>
            </div>
        </div>
        <div v-else>
            {{message}}
        </div>
    </div>
    <script type="text/javascript" src="/Resources/scripts/vue.min.js"></script>
    <script type="text/javascript" src="/Resources/scripts/zepto.min.js"></script>
    <script type="text/javascript">
    //$(function() {
        //http://www.kuaidi100.com/query?type=yuantong&postid=884126025036406283
        var psTypes = [{
            "name": "请选择",
            "value": "0"
        }, {
            "name": "申通快递",
            "value": "shentong"
        }, {
            "name": "EMS",
            "value": "ems"
        }, {
            "name": "顺丰快递",
            "value": "shunfeng"
        }, {
            "name": "申通快递",
            "value": "shentong"
        }, {
            "name": "圆通快递",
            "value": "yuantong"
        }, {
            "name": "中通快递",
            "value": "zhongtong"
        }, {
            "name": "韵达快递",
            "value": "yunda"
        }, {
            "name": "天天快递",
            "value": "tiantian"
        }, {
            "name": "百世汇通快递",
            "value": "huitongkuaidi"
        }, {
            "name": "全峰快递",
            "value": "quanfengkuaidi"
        }, {
            "name": "宅急送",
            "value": "zhaijisong"
        }];

        var psTypeVue = new Vue({
            "el": "#ps-type",
            "data": {
                "selected": "0",
                "options": psTypes
            }
        });

        var inputNumber = new Vue({
            "el": "#psNumber",
            "data": {
                "number": ""
            }
        });

        var resultPanel = new Vue({
            el: '#result-panel',
            data : {
                rows : [],
                message : "",
                status : true,
            }
        });


        new Vue({
            "el": "#search",
            "methods": {
                searchByNumber: function() {
                    ajaxSearch(psTypeVue.$data.selected, inputNumber.$data.number,function(data){
                        // 创建根实例
                        resultPanel.$data.rows = data.data.reverse();
                        resultPanel.$data.message = data.message;
                        resultPanel.$data.status = data.data.status === "200";
                    });
                }
            }
        });

    //});

    function ajaxSearch(psType, number,callback) {
        if (psType === "0") {
            alert("error");
            return;
        }
        if (number.length === 0) {
            alert("error");
            return;
        }
        var url = "/searchKuaiDi.jhtml?psType={0}&number={1}".replace("{0}", psType).replace("{1}", number)
        $.ajax({
            url: url,
            type:"post",
            dataType: "json",
            success: function(data) {
                if(typeof callback === "function"){
                    callback.call(this,data);
                }
            }
        });
    }
    </script>
</body>

</html>